<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>翻译</title>
		<link rel="stylesheet" href="css/style.css">
	</head>

	<body>
		<div class="weater">
			<div class="container">
				<div class="top">
					<h1>翻译</h1>
					<h3>中英互译</h3>
				</div>
				<div class="buttom">
					<div class="zuo">
						<p class="p1 p">中文</p><p class="p2 p">英语</p>
					</div>
					<p class="fx" onclick="demo()">
						<img src="images/logo_03.jpg" alt="">
					</p>
					<div class="you">
						<p class="p1 p">英语</p><p class="p2 p">中文</p>
					</div>
					<div class="kuang">
						<div class="kuang1">
							<textarea id="old"></textarea>
						</div>
						<div class="kuang2">
							<textarea id="new1" placeholder='翻译'></textarea>
						</div>
					</div>
					<div class="button">
						<button onclick="up()">翻译</button>
					</div>
				</div>
			</div>
		</div>

		<script>
			var data_zh = ['你知道吗', '六月', '一日', '星期一', '是', '儿童节'];
			var data_en = ['do you know', 'June', 'One day', 'Monday', 'Yes', 'Children\'s day'];
			var p = document.querySelectorAll('.p');
			var lang = 'zh';
			var a =true
			//转中文英文
			function up() {
				for(var i = 0; i < data_zh.length; i++) {
					if(old.value == data_zh[i]) {
						new1.value = data_en[i];
						if(lang == 'en') {
							demo();
							a=flase
						}
					} else if(old.value == data_en[i]) {
						new1.value = data_zh[i];
						if(lang == 'zh') {
							demo();
							a=flase
						}
					}
				}
				if(a){
					alert("无法翻译")
				}
			}
			//切换图标
			function demo() {
				if(lang == 'zh'){
					p[0].className = 'p2 p';
					p[1].className = 'p1 p';
					p[2].className = 'p2 p';
					p[3].className = 'p1 p';
					lang = 'en';
				}else{
					p[0].className = 'p1 p';
					p[1].className = 'p2 p';
					p[2].className = 'p1 p';
					p[3].className = 'p2 p';
					lang = 'zh';
				}
			}
			//弹窗
		</script>
	</body>

</html>